<!--
 * @Description: 分包进场计划
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-03-18 14:50:14
 * @LastEditTime: 2022-08-11 15:27:07
 * @FilePath: \cscec-pms-admin\src\views\project\plannManagement\plannTableComponents\components\SubcontractingEntryPlan.vue
-->
<template>
  <a-card>
    <title-name title="分包进场计划" />
    <a-button
      v-if="info.pageType !== 'detail'"
      type="primary"
      class="add"
      @click="handleAdd"
    >
      增行
    </a-button>
    <a-button
      v-if="info.pageType !== 'detail'"
      class="add"
      @click="handleDelete"
    >
      删除行
    </a-button>
    <a-table
      ref="table"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
      :loading="loading"
      row-key="id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
      <template
        v-for="{dataIndex} in columns"
        :slot="dataIndex"
        slot-scope="text,record"
      >
        <!-- 查看 -->
        <span
          v-if="info.pageType === 'detail'"
          :key="dataIndex"
        >
          <template v-if="dataIndex === 'tenderTime' || dataIndex === 'contractTime'">
            {{ record[dataIndex][0] }}/{{ record[dataIndex][1] }}
          </template>
          <template v-else>
            {{ record[dataIndex] }}
          </template>
        </span>
        <!-- 查看 -->
        <!-- 编辑 -->
        <span
          v-else
          :key="dataIndex"
        >
          <!-- 计划招标时间/计划合同签订 -->
          <a-range-picker
            v-if="dataIndex === 'tenderTime' || dataIndex === 'contractTime'"
            v-model="record[dataIndex]"
            :placeholder="['起始时间','终止时间']"
            class="input"
          />
          <!-- 计划招标时间/计划合同签订 -->
          <!-- 计划正式进场-->
          <a-date-picker
            v-else-if="dataIndex === 'approachTime'"
            v-model="record[dataIndex]"
            placeholder="请选择"
            class="input"
          />
          <!-- 计划正式进场-->
          <BaseInput
            v-else
            v-model="record[dataIndex]"
            class="input"
            :max-length="300"
          />
        </span>
        <!-- 编辑 -->
      </template>
    </a-table>
  </a-card>
</template>
<script>
import { scheme } from '@/api/project/plannManagement/plannTableSummary'
export default {
  name: 'SubcontractingEntryPlan' + Date.now(),
  components: {},
  data() {
    return {
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '分包名称',
          dataIndex: 'subcontractName',
          align: 'center',
          scopedSlots: { customRender: 'subcontractName' }
        },
        {
          title: '计划招标时间',
          dataIndex: 'tenderTime',
          align: 'center',
          scopedSlots: { customRender: 'tenderTime' }
        },
        {
          title: '计划合同签订',
          dataIndex: 'contractTime',
          align: 'center',
          scopedSlots: { customRender: 'contractTime' }
        },
        {
          title: '计划正式进场',
          dataIndex: 'approachTime',
          align: 'center',
          scopedSlots: { customRender: 'approachTime' }
        }
      ],
      // 表数据
      data: [],
      // 必填项
      required: ['subcontractName', 'tenderTime', 'contractTime', 'approachTime'],
      // 选中项
      selectedRowKeys: [],
      // 加载
      loading: false
    }
  },
  computed: {
    // 地址携带信息
    info() {
      return this.$route.query
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * @description: 获取数据
     * @param {void}
     * @return {void}
     */
    async getData() {
      this.data = []
      const { id, version } = this.info
      this.loading = true
      const { code, data } = await scheme.querySchemeSubcontractApproachPlanDetail({
        latestData: version ? false : true,
        schemeDetailId: id,
        version
      })
      if (code === 200 && data.length > 0) {
        // 已有数据
        this.data = data.map((el, index) => {
          const item = this.$clone(el)
          if (el.tenderStartTime && el.contractStartTime) {
            item.tenderTime = [el.tenderStartTime, el.tenderEndTime]
            item.contractTime = [el.contractStartTime, el.contractEndTime]
          }
          // 目前列表未返回id，会导致索引报错以及删除不成功，此处加上id
          if(!item.id){
            item.id = 'temp' + index
          }
          return item
        })
      } else {
        // 没有数据
        this.handleAdd()
      }
      this.loading = false
    },
    /**
     * @description: 选中项改变
     * @param {string} selectedRowKeys 选中项id
     * @return {void}
     */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    /**
     * @description: 新增行
     * @param {void}
     * @return {void}
     */
    handleAdd() {
      const data = {}
      this.columns.forEach((el) => {
        if (el.dataIndex) {
          data[el.dataIndex] = null
        } else {
          data.id = 'temp' + Date.now()
        }
      })
      this.data.push(data)
    },
    /**
     * @description: 删除行
     * @param {void}
     * @return {void}
     */
    handleDelete() {
      this.data = this.data.filter((el) => !this.selectedRowKeys.includes(el.id))
      this.selectedRowKeys = []
    },
    /**
     * @description: 表格校验
     * @param {void}
     * @return {boolean} 是否通过校验
     */
    verify() {
      return !this.data.some((el) => {
        for (let item in this.required) {
          if ((el[this.required[item]] ?? '') === '') {
            return true
          }
        }
      })
    },
    /**
     * @description: 保存草稿
     * @param {object} baseInfo 基本信息
     * @return {void}
     */
    SubcontractingEntryPlanSaveDrafts(baseInfo) {
      this.handleSubmit(0,baseInfo)
    },
    /**
     * @description: 提交
     * @param {object} baseInfo 基本信息
     * @return {void}
     */
    SubcontractingEntryPlanSubmit(baseInfo) {
      if (this.verify()) {
        const vm = this
        this.$confirm({
          title: '温馨提示',
          content: '请确认是否提交？',
          onOk() {
            vm.handleSubmit(1,baseInfo)
          }
        })
      } else {
        this.$confirm({
          title: '温馨提示',
          content: '请将数据填写完整'
        })
      }
    },
    /**
     * @description: 数据提交
     * @param {number} status 状态码
     * @return {void}
     */
    handleSubmit(status,baseInfo) {
      const { id: schemeDetailId, pageType } = this.info
      scheme
        .batchUpdateSchemeSubcontractApproachPlan({
          changed: pageType === 'change',
          list: this.data.map(({ subcontractName, tenderTime, contractTime, approachTime }) => {
            return {
              subcontractName,
              tenderStartTime: this.moment(tenderTime[0]).format('YYYY-MM-DD'),
              tenderEndTime: this.moment(tenderTime[1]).format('YYYY-MM-DD'),
              contractStartTime: this.moment(contractTime[0]).format('YYYY-MM-DD'),
              contractEndTime: this.moment(contractTime[1]).format('YYYY-MM-DD'),
              approachTime: this.moment(approachTime).format('YYYY-MM-DD')
            }
          }),
          schemeDetailId,
          status
        })
        .then(({ code }) => {
          if (code === 200) {
            this.$message.success('操作成功')
            baseInfo.schemeDetailId = schemeDetailId
            baseInfo.status = status
            this.$emit('updateBasicDetail', baseInfo) 
            this.getData()
            if (status === 1) {
              this.$close()
            }
          }
        })
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.add {
  margin-right: 20px;
  margin-bottom: 20px;
}
@{deep}.input {
  .ant-input,
  .ant-input-number,
  .ant-select-selection {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
}
</style>

